<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="1">业务功能</el-menu-item>
      <el-menu-item index="2">数据统计</el-menu-item>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-submenu index="4">
        <template slot="title">个人中心</template>
        <el-menu-item index="4-1">查看信息</el-menu-item>
        <el-menu-item index="/login" @click="logout">注销登录</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'TopNavMenu',
  data () {
    return {
      activeIndex: '/home'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    logout () {
      axios({
        method: 'get',
        url: '/api/mylogin'
        // headers: {
        //   'Content-Type': 'application/x-www-form-urlencoded'
        // }
      })
        .then(result => {
          if (result.status === 200) {
            this.msg = result.data
          }
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style>
</style>
